$(function() {
	var chartPie = echarts.init(document.getElementById('chartPie'))
	var chartBar = echarts.init(document.getElementById('chartBar'))

	var id = location.search.substr(4);
  $.ajax({
    type: 'get',
    url: 'http://218.205.115.243:18080/afot-web/listSurvey?surveyScenic=' + id,
    dataType: 'json',
    success: function(res) {
      if (res.operStatus == 1) {
        setTableData(res.data);
      }
    },
    error: function(err) {
      console.log(err)
    }
  });

  function setTableData(data) {
  	// var data = {"operStatus":1,"data":[{"surveyId":79,"userId":1,"surveyScenic":1,"surveyScenicName":"成都大熊猫繁育研究基地","comfortLevel":8,"crowdScore":10,"matchingScore":10,"serviceScore":10,"overallScore":10,"surveyComments":"测试","surveyTime":"2017-09-18 22:17:37"},{"surveyId":78,"userId":1,"surveyScenic":1,"surveyScenicName":"成都大熊猫繁育研究基地","comfortLevel":8,"crowdScore":10,"matchingScore":10,"serviceScore":10,"overallScore":10,"surveyComments":"","surveyTime":"2017-09-18 22:17:30"},{"surveyId":76,"userId":1,"surveyScenic":1,"surveyScenicName":"成都大熊猫繁育研究基地","comfortLevel":6,"crowdScore":10,"matchingScore":10,"serviceScore":8,"overallScore":8,"surveyComments":"景色宜人，漂亮","surveyTime":"2017-09-18 21:35:32"},{"surveyId":66,"userId":1,"surveyScenic":1,"surveyScenicName":"成都大熊猫繁育研究基地","comfortLevel":2,"crowdScore":3,"matchingScore":3,"serviceScore":2,"overallScore":4,"surveyComments":"从旁边","surveyTime":"2017-09-18 21:18:17"},{"surveyId":65,"userId":1,"surveyScenic":1,"surveyScenicName":"成都大熊猫繁育研究基地","comfortLevel":2,"crowdScore":3,"matchingScore":3,"serviceScore":1,"overallScore":6,"surveyComments":"非常好玩","surveyTime":"2017-09-18 21:17:58"},{"surveyId":64,"userId":1,"surveyScenic":1,"surveyScenicName":"成都大熊猫繁育研究基地","comfortLevel":3,"crowdScore":2,"matchingScore":4,"serviceScore":2,"overallScore":6,"surveyComments":"景色漂亮","surveyTime":"2017-09-18 21:09:15"},{"surveyId":63,"userId":6,"surveyScenic":1,"surveyScenicName":"成都大熊猫繁育研究基地","comfortLevel":1,"crowdScore":3,"matchingScore":2,"serviceScore":2,"overallScore":6,"surveyComments":"得得得得多久","surveyTime":"2017-09-18 21:07:44"},{"surveyId":62,"userId":4,"surveyScenic":1,"surveyScenicName":"成都大熊猫繁育研究基地","comfortLevel":2,"crowdScore":3,"matchingScore":3,"serviceScore":5,"overallScore":10,"surveyComments":"景色宜人","surveyTime":"2017-09-18 21:04:42"},{"surveyId":61,"userId":4,"surveyScenic":1,"surveyScenicName":"成都大熊猫繁育研究基地","comfortLevel":2,"crowdScore":3,"matchingScore":5,"serviceScore":5,"overallScore":10,"surveyComments":"景色宜人","surveyTime":"2017-09-18 21:00:10"},{"surveyId":60,"userId":1,"surveyScenic":1,"surveyScenicName":"成都大熊猫繁育研究基地","comfortLevel":4,"crowdScore":4,"matchingScore":4,"serviceScore":4,"overallScore":8,"surveyComments":"有意思","surveyTime":"2017-09-18 20:51:19"}],"operMsg":"查询成功！"}
    var html = _.map(data, function(item, index) {
      return [
        '  <tr>',
        '    <td>' + (index + 1) + '</td>',
        '    <td>'+ item.surveyScenicName +'</td>',
        '    <td>'+ item.userName +'</td>',
        '    <td>'+ item.surveySource +'分</td>',
        '    <td>'+ item.comfortLevel +'分</td>',
        '    <td>'+ item.crowdScore +'分</td>',
        '    <td>'+ item.matchingScore +'分</td>',
        '    <td>'+ item.serviceScore +'分</td>',
        '    <td>'+ item.surveyComments +'分</td>',
        '    <td>'+ item.surveyTime +'分</td>',
        '  </tr>'
      ].join("");
    })
    $('.satis-table tbody').html(html.join(''));
  }

	var data2 = [{
        value: 3661,
        name: '1星',
        itemStyle: {
            normal: {
                color: 'rgba(0,255,255,0.58)',
                borderWidth: 1,
                borderColor: '#00ffff'
            }
        }
    }, {
        value: 5713,
        name: '2星',
        itemStyle: {
            normal: {
                color: 'rgba(55,201,54,0.6)',
                borderWidth: 1,
                borderColor: '#37c936'
            }
        }
    }, {
        value: 9938,
        name: '3星',
        itemStyle: {
            normal: {
                color: 'rgba(248,231,28,0.64)',
                borderWidth: 1,
                borderColor: '#F8E71C'
            }
        }
    }, {
        value: 17623,
        name: '4星',
        itemStyle: {
            normal: {
                color: 'rgba(249,95,182,0.53)',
                borderWidth: 1,
                borderColor: '#f95fb8'
            }
        }
    }, {
        value: 3299,
        name: '5星',
        itemStyle: {
            normal: {
                color: 'rgba(74,114,255,0.58)',
                borderWidth: 1,
                borderColor: '#4a72ff'
            }
        }
    }];

	drawPie();
	drawBar()

	function drawPie() {
		var options = {
	        tooltip: {
	            trigger: 'item',
	        },
	        legend: {
	            data: ['女性', '男性'].concat(_.map(data2, function(item) {return item.name})),
	            textStyle: {
	                color: '#fff'
	            },
	            orient: 'vertical',
	            left: 20,
	            top: 20,
	            selectedMode: false
	        },
	        series: [{
	            name: '满意度评分统计',
	            type: 'pie',
	            center: ['50%', '45%'],
	            selectedMode: 'single',
	            radius: ['34%', '65%'],
	            color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],
	            tooltip: {
	            	formatter: function(params) {
	            		return params.name + '：' + params.percent + '%'
	            	}
	            },
	            label: {
	                normal: {
	                    formatter: '{b}：{c}人',
	                    textStyle: {
	                        color: '#fff',
	                        fontSize: 14
	                    }
	                }
	            },
	            data: data2
	        }, {
	        	name: '评分人性别统计',
	        	type: 'pie',
	            center: ['50%', '45%'],
	            radius: '26%',
	            selectedMode: 'single',
	            color: ['#0E6FFF', '#8A1D8C'],
	            label: {
	                normal: {
	                    formatter: '{b}\n{d}%',
	                    position: 'inside',
	                    textStyle: {
	                        color: '#fff',
	                        fontSize: 12
	                    }
	                }
	            },
	            data: [{
	            	name: '男性',
	            	value: 250000
	            }, {
	            	name: '女性',
	            	value: 240000
	            }]
	        }]
	    };
	    chartPie.setOption(options)
	}

	function drawBar() {
		var option = {
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    textStyle: {
		    	color: '#DBDAEA'
		    },
		    legend: {
		    	right: 10,
		        data: ['1星', '2星','3星','4星','5星'],
		        textStyle: {
		        	color: '#DBDAEA'
		        }
		    },
		    grid: {
		        left: '0%',
		        right: '2%',
		        bottom: '7%',
		        containLabel: true
		    },
		    xAxis:  {
		        type: 'value',
		        axisTick: {
		        	show: false
		        },
		        axisLine: {
		        	lineStyle: {
		        		color: 'rgba(0,255,255,0.19)'
		        	}
		        },
		        splitLine: {
		        	lineStyle: {
		        		color: 'rgba(0,255,255,0.19)'
		        	}
		        },
		    },
		    yAxis: {
		        type: 'category',
		        data: ['工作人员服务态度','景区舒适度','景区配套','景区拥堵情况'],
		        axisTick: {
		        	show: false
		        },
		        axisLine: {
		        	lineStyle: {
		        		color: 'rgba(0,255,255,0.19)'
		        	}
		        },
		        axisLabel: {
		        	margin: 15,
		        }
		    },
		    color: ['rgba(74,114,255,0.58)', 'rgba(55,201,54,0.60)', 'rgba(248,231,28,0.64)', 'rgba(232,118,222,0.53)', 'rgba(0,255,255,0.58)'],
		    series: [
		        {
		            name: '1星',
		            type: 'bar',
		            stack: '总量',
		            barWidth: '50%',
		            label: {
		                normal: {
		                    show: true,
		                    position: 'inside'
		                }
		            },
		            data: [320, 302, 301, 334]
		        },
		        {
		            name: '2星',
		            type: 'bar',
		            stack: '总量',
		            label: {
		                normal: {
		                    show: true,
		                    position: 'inside'
		                }
		            },
		            data: [120, 132, 101, 134]
		        },
		        {
		            name: '3星',
		            type: 'bar',
		            stack: '总量',
		            label: {
		                normal: {
		                    show: true,
		                    position: 'inside'
		                }
		            },
		            data: [220, 182, 191, 234]
		        },
		        {
		            name: '4星',
		            type: 'bar',
		            stack: '总量',
		            label: {
		                normal: {
		                    show: true,
		                    position: 'inside'
		                }
		            },
		            data: [150, 212, 201, 154]
		        },
		        {
		            name: '5星',
		            type: 'bar',
		            stack: '总量',
		            label: {
		                normal: {
		                    show: true,
		                    position: 'inside'
		                }
		            },
		            data: [820, 832, 901, 934]
		        }
		    ]
		};
		chartBar.setOption(option)
	}
});